<template>
<dl :class="{'active': isActive}"
    @click.stop="selFile($event)"
    @dblclick="dblclickE()" class="file-item"
    @contextmenu.stop.prevent="showMenu($event, 'menu'+fileIndex, file)"
    draggable="true" @dragstart="onDragStart($event, file)"
>
  <dt>
    <q-icon  v-if="file.isFile" class="icon" :name="file.type === 'machine' ? 'img:statics/svg/'+ 'machine1'  +'.svg' : 'img:statics/svg/'+ file.type  +'.svg'"></q-icon>
    <q-icon  v-else class="icon" style="display:block;margin: 0 auto" name="img:statics/svg/file-icon.svg"></q-icon>
    <div class="file-sign" v-if="(isShowMenu|| isShowPair) && file.isFile && file.transferableFlag && isShowDui">
      <q-icon class="file-sign-svg" name="img:statics/img/pair.svg"/>
    </div>
  </dt>
  <dd>
    <div v-if="!edit" class="ellipsis-2-lines txt-ellipsis">{{file.label}}</div>
    <q-input class="name renameInput" :class="{'hidden':!edit}" v-model.trim="rename" outlined autogrow
             :ref="'renameInput1'+fileIndex" @keydown.native.enter="reNameBlur($event)"
             @blur="setNewNameFun($event)"/>
  </dd>
  <q-tooltip :delay="1000" anchor="bottom middle" self="center middle">{{file.label}}</q-tooltip>
  <q-menu :ref="'menu'+fileIndex" touch-position context-menu no-parent-event v-if="isShowMenu">
    <q-list dense style="min-width: 150px">
      <q-item clickable v-close-popup v-if="!file.isFile" @click="dblclickE(file)">
        <q-item-section>打开下一级</q-item-section>
      </q-item>
      <q-item clickable v-close-popup  @click="renameFun(file)">
        <q-item-section>重命名</q-item-section>
      </q-item>
      <q-item clickable v-close-popup v-if="file.isFile&&file.source!=='machine'" @click="addCompareList(file)">
        <q-item-section>加入对比列表</q-item-section>
      </q-item>
      <q-item
        clickable v-close-popup v-if="file.isFile && file.source === 'cloud'" @click="showVersionList(file)">
        <q-item-section>版本履历</q-item-section>
      </q-item>
      <q-item
        clickable v-close-popup v-if="file.isFile" @click="editFile(file)">
        <q-item-section>编辑</q-item-section>
      </q-item>
      <q-item
        clickable v-close-popup @click="deleteFun(file)"
        v-has="{ id: Enums.SYS_PERMISSION.G_DELETE_BTN.value }">
        <q-item-section>删除</q-item-section>
      </q-item>
      <q-item
        clickable v-close-popup v-if="file.isFile && isTranFlag" @click="signFile(file)">
        <q-item-section>{{file.transferableFlag ? '取消标记' : '标记'}}</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</dl>
</template>

<script>
import { isUploadFile } from 'src/assets/js/util'
import _ from 'lodash'
export default {
  name: 'file-item',
  props: {
    file: {
      type: Object
    },
    fileIndex: {
      type: Number
    },
    isActive: {
      type: Boolean,
      default: false
    },
    isShowMenu: {
      type: Boolean,
      default: true
    },
    isShowPair: { // 是否展示审核图标
      type: Boolean,
      default: false
    },
    isShowDui: { // 是否上传需要过滤标记
      type: Boolean,
      default: false
    },
    isTranFlag: { // 该人是否有标记权限
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      edit: false, // 是否是编辑转状态
      rename: '' // 重命名的暂存名字
    }
  },
  methods: {
    signFile (val) {
      this.$emit('signFile', val)
    },
    // 选择文件
    selFile (event) {
      this.$emit('selFiles', event, this.file)
    },
    // 双击文件
    dblclickE () {
      this.$emit('dblclickE', this.file)
    },
    // 右键展示菜单
    showMenu (event) {
      if (!this.isShowMenu) return
      this.$refs['menu' + this.fileIndex].show(event)
      this.$emit('setFile', this.file)
    },
    // 重命名
    renameFun () {
      this.rename = this.file.label
      this.edit = true
      // 设置选中区域
      this.$nextTick(() => {
        const input = this.$refs['renameInput1' + this.fileIndex]
        const dominput = input.constructor === Array ? input[0].$refs.input : input.$refs.input
        const endPos = this.getTxtPos(this.file.label)
        if (dominput.setSelectionRange) {
          dominput.focus()
          dominput.setSelectionRange(0, endPos)
        } else if (dominput.createTextRange) {
          var range = dominput.createTextRange
          range.collapse(true)
          range.moveStart('character', 0)
          range.moveEnd('character', endPos)
          range.select()
        }
      })
    },
    // 重命名回车
    reNameBlur (event) {
      event.target.blur()
    },
    // 重命名失去焦点,真正去重命名
    setNewNameFun (event) {
      event.preventDefault()
      // 如果名字没有变化，就这样了a
      if (this.file.label === this.rename) {
        this.edit = false
        return
      }
      if (_.isEmpty(this.rename)) {
        this.noticeMessage('名称不能为空')
        this.edit = false
        return
      }
      if (this.rename.length > 20) {
        this.noticeMessage('名称长度不能为超过20')
        this.edit = false
        return
      }
      if (isUploadFile(this.rename)) {
        this.noticeMessage('名称不规范,请重试')
        this.edit = false
        return
      }
      this.$emit('setNewNameFun', this.file, this.rename)
    },
    // 获取选中区域的终止位置
    getTxtPos (label) {
      let txtArr = label.split('.')
      if (txtArr.length === 1) {
        return label.length
      }
      const lastLength = txtArr[txtArr.length - 1].length
      return label.length - lastLength - 1
    },
    // 加入对比列表
    addCompareList () {
      this.$emit('addCompareList', this.file)
    },
    // 显示版本履历
    showVersionList () {
      this.$emit('showVersionList', this.file)
    },
    // 编辑文件
    editFile () {
      this.$emit('editFile', this.file)
    },
    // 删除
    deleteFun () {
      this.$emit('deleteFun', this.file)
    },
    // 拖动功能
    onDragStart (e, dragItem) {
      e.dataTransfer.setData('text', e.target.id)
      e.dataTransfer.dropEffect = 'move'
      this.$emit('setDragItem', dragItem)
    },
    // 提示
    // 注意提示
    noticeMessage (message) {
      this.$message.warning(message)
    }
  }
}
</script>

<style scoped lang="stylus">
dl.file-item{
  margin-right 4px
  margin-bottom 4px
  padding 7px 3px
  width 84px
  height 95px
  font-size 14px
  box-sizing border-box
  text-align center
  border 1px solid #fff
  &.active, &:hover{
    background-color rgba(95,119,253, 0.2)
    border 1px solid $primary
  }
  dt{
    text-align center
    position relative
    .icon{
      font-size 36px
    }
    .file-sign{
      position absolute
      top -10px
      left 15px
      &-svg{
        font-size 18px
        opacity .8
      }
    }
  }

  dd{
    .renameInput{
      position relative
      z-index 10
      background-color #fff
    }
  }
  .txt-ellipsis{
    word-break:break-all
  }
}
</style>
